import ReactDOM from 'react-dom';
import PreviewFileContainer from './PreviewFileContainer'

import {
  createCommonSingleton
} from '@/plugins/utils/index'

// 创建 预览文件 的 单例 -- 惰性单例
// const createPreviewFileDiv = (function(){
//   let div = null
//   return function(){
//     if(!div){
//       const id = `p-f-${nanoid()}`
//       div = document.createElement('div')
//       div.style.width = 0
//       div.style.height = 0
//       div.id = id
//       document.body.appendChild(div)
//     }
//     return div
//   }
// }())

const createPreviewFileDiv = createCommonSingleton(function(){
    const id = `p-f-${$g.nanoid()}`
    const div = document.createElement('div')
    div.style.width = 0
    div.style.height = 0
    div.id = id
    document.body.appendChild(div)
    return div
})

const previewSingleFile = (src) => {

  src = src.replace(/[\[|\]|，|\,|#]/g, '') // 去除 # 等 浏览器 发出请求无法识别的 特殊 字符串

  let div = createPreviewFileDiv() // 获取 需要用来 预览 文件的  容器 dom

  ReactDOM.render(
    <PreviewFileContainer key = {$g.nanoid()} src={src}/>,
    div
  )
}

export default previewSingleFile